<template>
	<view class="app-public-wx-login" :style="[AppSkinVar]">
		<view class="e-p-t-60 e-m-b-60 e-flex-x-center">
			<image class="app-public-wx-login__logo" :src="logo"></image>
		</view>
		<button class="app-public-wx-login__btn e-m-b-40 e-reset-button bg-primary c-white" open-type="getPhoneNumber" @getphonenumber="handleLogin">手机号一键登录</button>
		<button class="app-public-wx-login__btn app-public-wx-login__btn-no e-reset-button" @tap="$back(1)">暂不登录</button>

		<view class="e-p-t-50 e-p-l-80 e-p-r-80 e-flex" @tap="isAgree = !isAgree" v-if="agreeShow || privacyShow">
			<radio style="transform: scale(0.8)" :checked="isAgree" :color="AppSkin.primary" @tap.stop="isAgree = !isAgree"  />
			<text class="keep-all">{{ $t('public.我已阅读并同意') }}</text>
			<navigator class="c-primary keep-all" url="/pages/public/txt?id=13" v-if="agreeShow" @tap.stop>
				{{ $t('public.网络服务协议') }}
			</navigator>
			<template v-if="privacyShow">
				<text>{{ $t('public.与') }}</text>
				<navigator class="c-primary keep-all" url="/pages/public/txt?id=15" @tap.stop>{{ $t('public.隐私权政策') }}</navigator>
			</template>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { postWxLogin, postBindPhone } from '@/common/request/api';
import { useBasics } from '@/common/stores';
import { useCurrentInstance, useLogin } from '@/common/hooks';
import { storeToRefs } from 'pinia';
import { onLoad } from '@dcloudio/uni-app';
import { useInit } from '@/common/stores';
import { page } from '@/common/utils'

const ctx = useCurrentInstance();
const { login } = useLogin();
const {setTabbarPageIndex} = useInit()

const { agreement } = storeToRefs(useBasics());
const agreeShow = computed(() => agreement.value.find((item) => item.id == 14)?.status === 1);
const privacyShow = computed(() => agreement.value.find((item) => item.id == 15)?.status === 1);

const logo = ref('');
let openId = '';
const isAgree = ref(false);

const handleLogin = (e: { detail: { code: string } }) => {
	if (!isAgree.value && (privacyShow.value || agreeShow.value)) {
		ctx.$toastApp(ctx.$t('public.请先阅读并同意用户协议'));
		return;
	}
	let params = {
		wxCode: e.detail.code,
		openid: this.openId,
		salt: uni.getStorageSync('userSalt')
	};
	postBindPhone(params).then((res) => {
		login(res.data.access_token);
		uni.removeStorageSync('userSalt');
		ctx.$goRedirectTo('/pages/public/account/user');
	});
};

onLoad(() => {
	let extConfig = wx.getExtConfigSync() ? wx.getExtConfigSync() : null;
	if (extConfig !== null) {
		logo.value = extConfig.head_img;
	}

	uni.login({
		provider: 'weixin',
		success: (res) => {
			postWxLogin({
				code: res.code
			}).then((res) => {
				if (res.data.access_token) {
					uni.hideLoading();
					login(res.data.access_token);
					const pagesPath = page(2)
					if (!pagesPath||pagesPath === '/' || pagesPath === 'pages/public/account/wxLogin') {
						setTabbarPageIndex(0)
						ctx.$switchTab('/pages/tabbar/index');
					} else {
						ctx.$back();
					}
				} else {
					openId = res.data.openid;
				}
			});
		},
		fail: (res) => {
			console.log(res);
		}
	});
});
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss">

@include appBem_b(public-wx-login) {
	padding-top: 94px;
	@include appBem_e(logo) {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
	}
	@include appBem_e(btn) {
		width: 600rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 36rpx;
		border-radius: 44rpx;
		margin: 0 auto;
	}
	@include appBem_e(btn-no){
		border: 1px solid $base-color-text-secondary;
	}
}
</style>
